<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="router 的基础学习router 的基本使用HTML12345&lt;!--使用 router-link 组件进行导航 --&gt;&lt;!--通过传递 &#96;to&#96; 来指定链接 --&gt;&lt;!--&#96;&lt;router-link&gt;&#96; 将呈现一个带有正确 &#96;href&#96; 属性的 &#96;&lt;a&gt;&#96; 标签--&gt;&lt;router-link to&#x3D;&quot;&#x2F;&quot;&amp;">
<meta property="og:type" content="article">
<meta property="og:title" content="router基础">
<meta property="og:url" content="http://tallgy.gitee.io/2022/02/07/router/router%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="router 的基础学习router 的基本使用HTML12345&lt;!--使用 router-link 组件进行导航 --&gt;&lt;!--通过传递 &#96;to&#96; 来指定链接 --&gt;&lt;!--&#96;&lt;router-link&gt;&#96; 将呈现一个带有正确 &#96;href&#96; 属性的 &#96;&lt;a&gt;&#96; 标签--&gt;&lt;router-link to&#x3D;&quot;&#x2F;&quot;&amp;">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-02-07T10:41:53.000Z">
<meta property="article:modified_time" content="2023-06-25T08:57:29.323Z">
<meta property="article:author" content="tallgy">
<meta property="article:tag" content="router">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://tallgy.gitee.io/2022/02/07/router/router%E5%9F%BA%E7%A1%80/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"http://tallgy.gitee.io/2022/02/07/router/router%E5%9F%BA%E7%A1%80/","path":"2022/02/07/router/router基础/","title":"router基础"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>router基础 | tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#router-%E7%9A%84%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0"><span class="nav-number">1.</span> <span class="nav-text">router 的基础学习</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#router-%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="nav-number">1.1.</span> <span class="nav-text">router 的基本使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML"><span class="nav-number">1.1.1.</span> <span class="nav-text">HTML</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript"><span class="nav-number">1.1.2.</span> <span class="nav-text">JavaScript</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%8C%B9%E9%85%8D"><span class="nav-number">1.2.</span> <span class="nav-text">动态路由匹配</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%B8%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96"><span class="nav-number">1.2.1.</span> <span class="nav-text">相应路由参数的变化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%8D%95%E8%8E%B7%E8%B7%AF%E7%94%B1"><span class="nav-number">1.2.2.</span> <span class="nav-text">捕获路由</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E7%9A%84%E5%8C%B9%E9%85%8D%E8%AF%AD%E6%B3%95"><span class="nav-number">1.3.</span> <span class="nav-text">路由的匹配语法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1"><span class="nav-number">1.4.</span> <span class="nav-text">嵌套路由</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BC%96%E7%A8%8B%E5%BC%8F%E5%AF%BC%E8%88%AA"><span class="nav-number">1.5.</span> <span class="nav-text">编程式导航</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9B%BF%E6%8D%A2%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE"><span class="nav-number">1.5.1.</span> <span class="nav-text">替换当前位置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%A8%AA%E8%B7%A8%E5%8E%86%E5%8F%B2"><span class="nav-number">1.5.2.</span> <span class="nav-text">横跨历史</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%AF%A1%E6%94%B9%E5%8E%86%E5%8F%B2"><span class="nav-number">1.5.3.</span> <span class="nav-text">篡改历史</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E8%B7%AF%E7%94%B1"><span class="nav-number">1.6.</span> <span class="nav-text">命名路由</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE"><span class="nav-number">1.7.</span> <span class="nav-text">命名视图</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E5%B5%8C%E5%A5%97%E8%A7%86%E5%9B%BE"><span class="nav-number">1.7.1.</span> <span class="nav-text">命名嵌套视图</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E9%87%8D%E5%AE%9A%E5%90%91%E5%92%8C%E5%88%AB%E5%90%8D"><span class="nav-number">1.8.</span> <span class="nav-text">重定向和别名</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%B8%E5%AF%B9%E9%87%8D%E5%AE%9A%E5%90%91"><span class="nav-number">1.8.1.</span> <span class="nav-text">相对重定向</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%AB%E5%90%8D"><span class="nav-number">1.8.2.</span> <span class="nav-text">别名</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%8F%82"><span class="nav-number">1.9.</span> <span class="nav-text">路由组件传参</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%80%9A%E8%BF%87-props-true-%E4%BC%A0%E9%80%92%E7%BB%99%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6"><span class="nav-number">1.9.1.</span> <span class="nav-text">通过 props:true 传递给路由组件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE-1"><span class="nav-number">1.9.2.</span> <span class="nav-text">命名视图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#props%E4%BD%BF%E7%94%A8%E5%AF%B9%E8%B1%A1"><span class="nav-number">1.9.3.</span> <span class="nav-text">props使用对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.9.4.</span> <span class="nav-text">函数模式</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8D%E5%90%8C%E7%9A%84%E5%8E%86%E5%8F%B2%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.10.</span> <span class="nav-text">不同的历史模式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Hash%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.10.1.</span> <span class="nav-text">Hash模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML5%E6%A8%A1%E5%BC%8F%EF%BC%8Chistory%E6%A8%A1%E5%BC%8F"><span class="nav-number">1.10.2.</span> <span class="nav-text">HTML5模式，history模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%85%8D%E7%BD%AE%E5%AE%9E%E4%BE%8B"><span class="nav-number">1.10.3.</span> <span class="nav-text">服务器配置实例</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Apache"><span class="nav-number">1.10.3.1.</span> <span class="nav-text">Apache</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#nginx"><span class="nav-number">1.10.3.2.</span> <span class="nav-text">nginx</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%8E%9F%E7%94%9F-Node-js"><span class="nav-number">1.10.3.3.</span> <span class="nav-text">原生 Node.js</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Express-Node-js"><span class="nav-number">1.10.3.4.</span> <span class="nav-text">Express + Node.js</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#caveat"><span class="nav-number">1.10.4.</span> <span class="nav-text">caveat</span></a></li></ol></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2022/02/07/router/router%E5%9F%BA%E7%A1%80/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          router基础
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2022-02-07 18:41:53" itemprop="dateCreated datePublished" datetime="2022-02-07T18:41:53+08:00">2022-02-07</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/router/" itemprop="url" rel="index"><span itemprop="name">router</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h1 id="router-的基础学习"><a href="#router-的基础学习" class="headerlink" title="router 的基础学习"></a>router 的基础学习</h1><h2 id="router-的基本使用"><a href="#router-的基本使用" class="headerlink" title="router 的基本使用"></a>router 的基本使用</h2><h3 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--使用 router-link 组件进行导航 --&gt;</span><br><span class="line">&lt;!--通过传递 `to` 来指定链接 --&gt;</span><br><span class="line">&lt;!--`&lt;router-link&gt;` 将呈现一个带有正确 `href` 属性的 `&lt;a&gt;` 标签--&gt;</span><br><span class="line">&lt;router-link to=&quot;/&quot;&gt;Go to Home&lt;/router-link&gt;</span><br><span class="line">&lt;router-link to=&quot;/about&quot;&gt;Go to About&lt;/router-link&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 路由出口 --&gt;</span><br><span class="line">&lt;!-- 路由匹配到的组件将渲染在这里 --&gt;</span><br><span class="line">&lt;router-view&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure>

<h3 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123; path: &#x27;/&#x27;, component: Home &#125;,</span><br><span class="line">  &#123; path: &#x27;/about&#x27;, component: About &#125;,</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">const router = VueRouter.createRouter(&#123;</span><br><span class="line">  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。</span><br><span class="line">  history: VueRouter.createWebHashHistory(),</span><br><span class="line">  routes, // `routes: routes` 的缩写</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.use(router)</span><br></pre></td></tr></table></figure>

<p>​        通过JavaScript进行调用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">this.$router.push(&#x27;/login&#x27;)</span><br></pre></td></tr></table></figure>

<p>​        请记住，<code>this.$router</code> 与直接使用通过 <code>createRouter</code> 创建的 <code>router</code> 实例完全相同。我们使用 <code>this.$router</code> 的原因是，我们不想在每个需要操作路由的组件中都导入路由。</p>
<h2 id="动态路由匹配"><a href="#动态路由匹配" class="headerlink" title="动态路由匹配"></a>动态路由匹配</h2><p>​        我们可以使用一个动态字段来进行实现，我们称之为 路径参数。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  // 动态字段以冒号开始</span><br><span class="line">  &#123; path: &#x27;/users/:id&#x27;, component: User &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>​        现在像 <code>/users/johnny</code> 和 <code>/users/jolyne</code> 这样的 URL 都会映射到同一个路由。</p>
<p>​        它的 <em>params</em> 的值将在每个组件中以 <code>this.$route.params</code> 的形式暴露出来。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">this.$route.params.id</span><br></pre></td></tr></table></figure>

<p>通过这个方式添加的参数是直接会放在url路径里面的，所以不会因为刷新而消失</p>
<h3 id="相应路由参数的变化"><a href="#相应路由参数的变化" class="headerlink" title="相应路由参数的变化"></a>相应路由参数的变化</h3><p>​        当用户从 <code>/users/johnny</code> 导航到 <code>/users/jolyne</code> 时，<strong>相同的组件实例将被重复使用</strong>。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。<strong>不过，这也意味着组件的生命周期钩子不会被调用</strong>。</p>
<p>​        要对同一个组件中参数的变化做出响应的话，你可以简单地 watch <code>$route</code> 对象上的任意属性，在这个场景中，就是 <code>$route.params </code> </p>
<p><strong>方法一：我们可以使用 watch 事件，对params进行监听：</strong> </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">const User = &#123;</span><br><span class="line">  template: &#x27;...&#x27;,</span><br><span class="line">  created() &#123;</span><br><span class="line">    this.$watch(</span><br><span class="line">      () =&gt; this.$route.params,</span><br><span class="line">      (toParams, previousParams) =&gt; &#123;</span><br><span class="line">        // 对路由变化做出响应...</span><br><span class="line">      &#125;</span><br><span class="line">    )</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​        我们逐行分析，首先，this.$watch 是vue的一个 vm.$watch 的方法。其实就是 watch 属性。</p>
<p>​        然后，我们得知道 this.$watch 的参数，才知道这个作用是什么。</p>
<ul>
<li>参数一： 是一个string类型，是一个表达式。或者是一个函数。通过判断返回值的变化来进行处理。</li>
<li>参数二：是一个调用的方法。对应的两个参数是 oldValue 和 newValue。同时会返回一个 unwatch 的方法。调用后将取消监听。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var unwatch = vm.$watch(&#x27;a&#x27;, cb)</span><br><span class="line">// 之后取消观察</span><br><span class="line">unwatch()</span><br></pre></td></tr></table></figure>



<p><strong>方法二：使用路由守卫 beforeRouterUpdate</strong>：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">const User = &#123;</span><br><span class="line">  template: &#x27;...&#x27;,</span><br><span class="line">  async beforeRouteUpdate(to, from) &#123;</span><br><span class="line">    // 对路由变化做出响应...</span><br><span class="line">    this.userData = await fetchUser(to.params.id)</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p><strong>我们分析两个的区别</strong>：</p>
<p>简述区别：下面的说法很长，并且总结的可能不对：</p>
<ul>
<li>$watch 是通过监听的方式进行的监听，所以，只要组件没有被销毁的情况下，监听就有效。所以再从监听组件跳出其他组件时会触发。</li>
<li>路由守卫 beforeRouteUpdate 是需要在路由内部的参数变化才会触发。对于跳转去其他路由和从其他路由跳转回来都不会触发。</li>
</ul>
<p>第一个：是利用路由的复用原因，所以使用watch来监听参数的变化，通过参数的变化，来表示里面的修改。</p>
<p>​        同时使用 watch 进行监听，对于跳转去其他路由，也会进入监听的判断。</p>
<p>​        为什么跳出去的时候会进行一次判断。虽然我们可以知道，监听的是 this.$route.params。这个是一个全局且是一个唯一的对象。</p>
<p>​        就是说。在当前项目里面的params。那么就会是这一个，那么确实，监听有效是应该的。但是我们更应该思考。这个监听我们是在这个里面进行的创建，那么在这个组件被移除之后，监听也会被移除。所以按理，跳转出去之后是不会触发监听的。</p>
<p>​        结果也算是半个很像。因为在跳转出去之后的每一次都不会触发监听。但是，在跳转出去的那一次也会触发。并把目的路由也找到。</p>
<p>​        说明了路由是在destroy之前进行了判断跳转修改了。</p>
<p>第二个：是使用的路由守卫。通过每次跳转路由时，会经过的路由守卫来判断。</p>
<p>​        通过使用路由守卫来进行判断的。跳转去其他路由，并不会触发路由守卫。</p>
<p>​        但是跳转时机 beforeRouteUpdate 会在监听之前进行输出。</p>
<p>​        那么我们就需要思考了，首先对于 before路由守卫 会在监听前进行调用执行。那么按理说。应该会和监听的输出基本一致。</p>
<p>​        但是最终就是，对于跳转出去的路由并不会触发路由守卫</p>
<p>​        同时我们通过断点调试发现。before路由守卫 执行之后，浏览器的url才会进行改变。意思就是说。watch事件的时候，浏览器的url已经发生改变了。</p>
<h3 id="捕获路由"><a href="#捕获路由" class="headerlink" title="捕获路由"></a>捕获路由</h3><p>​        简单来说，我们可以通过加入正则表达式来进行。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下</span><br><span class="line">  &#123; path: &#x27;/:pathMatch(.*)*&#x27;, name: &#x27;NotFound&#x27;, component: NotFound &#125;,</span><br><span class="line">  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下</span><br><span class="line">  &#123; path: &#x27;/user-:afterUser(.*)&#x27;, component: UserGeneric &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>​        这里使用了 正则表达式的语法。然后意思就是 :pathMatch 里面的内容要满足正则表达式，对于不满足的。那么就不会进入这个路由。</p>
<p>​        同时使用匹配的，对于 /:path 可以匹配到 /a /a/b 这种多层的嵌套。但是前提是，没有其他的path选择。</p>
<p>​        router 使用的路径匹配算法，其灵感来自于 express</p>
<h2 id="路由的匹配语法"><a href="#路由的匹配语法" class="headerlink" title="路由的匹配语法"></a>路由的匹配语法</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// /:orderId -&gt; 仅匹配数字</span><br><span class="line">&#123; path: &#x27;/:orderId(\\d+)&#x27; &#125;,</span><br><span class="line">// /:productName -&gt; 匹配其他任何内容</span><br><span class="line">&#123; path: &#x27;/:productName&#x27; &#125;,</span><br></pre></td></tr></table></figure>

<p>​        现在，转到 <code>/25</code> 将匹配 <code>/:orderId</code>，其他情况将会匹配 <code>/:productName</code>。<code>routes</code> 数组的顺序并不重要!</p>
<blockquote>
<p>TIP</p>
<p>确保**转义反斜杠( <code>\</code> )**，就像我们对 <code>\d</code> (变成<code>\\d</code>)所做的那样，在 JavaScript 中实际传递字符串中的反斜杠字符。</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123; path: &#x27;/:pathMatch&#x27;, component: About &#125;</span><br><span class="line"></span><br><span class="line">这样匹配将不能匹配到 / /asd/s</span><br><span class="line">因为这个正则是默认的([^/]+)，^代表了不匹配括号里面的。然后 +，代表了至少需要匹配到一个以上。所以对于上面的，不会被匹配到。</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123; path: &#x27;/:p(.*)&#x27; &#125; </span><br><span class="line">同时我们自己也可以进行覆盖。</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123; path: &#x27;/:p*&#x27; &#125;</span><br><span class="line"></span><br><span class="line">可以匹配到 / /as/a /sa/s</span><br><span class="line">同时我们也可以 把 p 进行正则。那么这样的话，可以多次进行匹配。注意这样生成的params是一个数组。而不是一个字符串。</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  // 仅匹配数字</span><br><span class="line">  // 匹配 /1, /1/2, 等</span><br><span class="line">  &#123; path: &#x27;/:chapters(\\d+)+&#x27; &#125;,</span><br><span class="line">  // 匹配 /, /1, /1/2, 等</span><br><span class="line">  &#123; path: &#x27;/:chapters(\\d+)*&#x27; &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>​        同时也可以使用  <strong>?</strong> 来代表可选参数。当然使用 * 这个也是可选的。但是使用 ？是0或者1个，不会出现重复。</p>
<p>​        <strong>路径的排名</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://paths.esm.dev/?p=AAMeJSyAwR4UbFDAFxAcAGAIJXMAAA..</span><br></pre></td></tr></table></figure>

<p>​        这是一个路径的排名工具，作用的话，我认为应该是通过计算分数。路径的匹配会通过分数进行排序来匹配。</p>
<h2 id="嵌套路由"><a href="#嵌套路由" class="headerlink" title="嵌套路由"></a>嵌套路由</h2><p>​        简单来说就是，router-view 是会渲染 的顶层的路由组件，但是对于组件内部也使用了路由的。我们就可以使用路由嵌套了。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/user/:id&#x27;,</span><br><span class="line">    component: User,</span><br><span class="line">    children: [</span><br><span class="line">      &#123;</span><br><span class="line">        // 当 /user/:id/profile 匹配成功</span><br><span class="line">        // UserProfile 将被渲染到 User 的 &lt;router-view&gt; 内部</span><br><span class="line">        path: &#x27;profile&#x27;,</span><br><span class="line">        component: UserProfile,</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        // 当 /user/:id/posts 匹配成功</span><br><span class="line">        // UserPosts 将被渲染到 User 的 &lt;router-view&gt; 内部</span><br><span class="line">        path: &#x27;posts&#x27;,</span><br><span class="line">        component: UserPosts,</span><br><span class="line">      &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>​        简单来说就是我们会对于匹配成功的子路由，然后会在 User组件里面的 router-view 进行渲染。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">children: [</span><br><span class="line">    // 当 /user/:id 匹配成功</span><br><span class="line">    // UserHome 将被渲染到 User 的 &lt;router-view&gt; 内部</span><br><span class="line">    &#123; path: &#x27;&#x27;, component: UserHome &#125;,</span><br><span class="line"></span><br><span class="line">    // ...其他子路由</span><br><span class="line">],</span><br></pre></td></tr></table></figure>

<p>​        同时我们可以使用一个空的 path 来代表子路由的home。但是记住，空的path只是代表匹配了 /user/:id 但是对于 /user/:id/asd 虽然没有在子路由匹配成功。但是进入了子路由的，这个不会被匹配到。</p>
<h2 id="编程式导航"><a href="#编程式导航" class="headerlink" title="编程式导航"></a>编程式导航</h2><p>​        <strong>在 Vue 实例中，你可以通过 <code>$router</code> 访问路由实例。因此你可以调用 <code>this.$router.push</code>。</strong></p>
<p>​        当你点击 <code>&lt;router-link&gt;</code> 时，内部会调用这个方法，所以点击     <code>&lt;router-link :to=&quot;...&quot;&gt;</code> 相当于调用 <code>router.push(...)</code> </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// 字符串路径</span><br><span class="line">router.push(&#x27;/users/eduardo&#x27;)</span><br><span class="line"></span><br><span class="line">// 带有路径的对象</span><br><span class="line">router.push(&#123; path: &#x27;/users/eduardo&#x27; &#125;)</span><br><span class="line"></span><br><span class="line">// 命名的路由，并加上参数，让路由建立 url</span><br><span class="line">router.push(&#123; name: &#x27;user&#x27;, params: &#123; username: &#x27;eduardo&#x27; &#125; &#125;)</span><br><span class="line"></span><br><span class="line">// 带查询参数，结果是 /register?plan=private</span><br><span class="line">router.push(&#123; path: &#x27;/register&#x27;, query: &#123; plan: &#x27;private&#x27; &#125; &#125;)</span><br><span class="line"></span><br><span class="line">// 带 hash，结果是 /about#team</span><br><span class="line">router.push(&#123; path: &#x27;/about&#x27;, hash: &#x27;#team&#x27; &#125;)</span><br></pre></td></tr></table></figure>

<p>​        <strong>但是注意</strong>，如果提供了 <code>path</code>，<code>params</code> 会被忽略，上述例子中的 <code>query</code> 并不属于这种情况。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const username = &#x27;eduardo&#x27;</span><br><span class="line">// 我们可以手动建立 url，但我们必须自己处理编码</span><br><span class="line">router.push(`/user/$&#123;username&#125;`) // -&gt; /user/eduardo</span><br><span class="line">// 同样</span><br><span class="line">router.push(&#123; path: `/user/$&#123;username&#125;` &#125;) // -&gt; /user/eduardo</span><br><span class="line">// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益</span><br><span class="line">router.push(&#123; name: &#x27;user&#x27;, params: &#123; username &#125; &#125;) // -&gt; /user/eduardo</span><br><span class="line">// `params` 不能与 `path` 一起使用</span><br><span class="line">router.push(&#123; path: &#x27;/user&#x27;, params: &#123; username &#125; &#125;) // -&gt; /user</span><br></pre></td></tr></table></figure>

<p>​        由于属性 <code>to</code> 与 <code>router.push</code> 接受的对象种类相同，所以两者的规则完全相同。</p>
<p>​         <code>router.push</code> 和所有其他导航方法都会返回一个 <em>Promise</em>，让我们可以等到导航完成后才知道是成功还是失败。我们将在 <a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/advanced/navigation-failures.html">Navigation Handling</a> 中详细介绍。</p>
<h3 id="替换当前位置"><a href="#替换当前位置" class="headerlink" title="替换当前位置"></a>替换当前位置</h3><p>​        使用 replace 来进行跳转，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link :to=&quot;...&quot; replace&gt;	</span><br><span class="line">router.replace(...)</span><br></pre></td></tr></table></figure>

<p>​        也可以直接在传递给 <code>router.push</code> 的 <code>routeLocation</code> 中增加一个属性 <code>replace: true</code> </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">router.push(&#123; path: &#x27;/home&#x27;, replace: true &#125;)</span><br><span class="line">// 相当于</span><br><span class="line">router.replace(&#123; path: &#x27;/home&#x27; &#125;)</span><br></pre></td></tr></table></figure>



<h3 id="横跨历史"><a href="#横跨历史" class="headerlink" title="横跨历史"></a>横跨历史</h3><p>​        该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 <code>window.history.go(n)</code>。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">// 向前移动一条记录，与 router.forward() 相同</span><br><span class="line">router.go(1) 右箭头</span><br><span class="line"></span><br><span class="line">// 返回一条记录，与router.back() 相同</span><br><span class="line">router.go(-1) 左箭头</span><br><span class="line"></span><br><span class="line">// 前进 3 条记录</span><br><span class="line">router.go(3)</span><br><span class="line"></span><br><span class="line">// 如果没有那么多记录，静默失败</span><br><span class="line">router.go(-100)</span><br><span class="line">router.go(100)</span><br></pre></td></tr></table></figure>



<h3 id="篡改历史"><a href="#篡改历史" class="headerlink" title="篡改历史"></a>篡改历史</h3><p>​        你可能已经注意到，<code>router.push</code>、<code>router.replace</code> 和 <code>router.go</code> 是 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/History"><code>window.history.pushState</code>、<code>window.history.replaceState</code> 和 <code>window.history.go</code></a> 的翻版，它们确实模仿了 <code>window.history</code> 的 API。</p>
<p>​        同时我刚刚进行了测试，发现了 pushState并没有刷新浏览器，但是更新了url，所以这就是router模仿的。对，使用history.go 以及使用 replaceState 都没有进行刷新，仅仅只是修改了url，因为这个是一个同源的方法。对于不同源的处理会出错。</p>
<h2 id="命名路由"><a href="#命名路由" class="headerlink" title="命名路由"></a>命名路由</h2><p>​        除了 <code>path</code> 之外，你还可以为任何路由提供 <code>name</code>。这有以下优点：</p>
<ul>
<li>没有硬编码的 URL</li>
<li><code>params</code> 的自动编码/解码。</li>
<li>防止你在 url 中出现打字错误。</li>
<li>绕过路径排序（如显示一个）</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/user/:username&#x27;,</span><br><span class="line">    name: &#x27;user&#x27;,</span><br><span class="line">    component: User</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link :to=&quot;&#123; name: &#x27;user&#x27;, params: &#123; username: &#x27;erina&#x27; &#125;&#125;&quot;&gt;</span><br><span class="line">  User</span><br><span class="line">&lt;/router-link&gt;</span><br><span class="line"></span><br><span class="line">路由将导航到路径 `/user/erina`。</span><br></pre></td></tr></table></figure>



<h2 id="命名视图"><a href="#命名视图" class="headerlink" title="命名视图"></a>命名视图</h2><p>​        有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 <code>sidebar</code> (侧导航) 和 <code>main</code> (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 <code>router-view</code> 没有设置名字，那么默认为 <code>default</code>。</p>
<p>​        简单来说就是，想要存在多个同级的router-view，可以使用命名视图， 默认名字为 default</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view class=&quot;view left-sidebar&quot; name=&quot;LeftSidebar&quot;&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;router-view class=&quot;view main-content&quot;&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;router-view class=&quot;view right-sidebar&quot; name=&quot;RightSidebar&quot;&gt;&lt;/router-view&gt;</span><br></pre></td></tr></table></figure>

<p>​        一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 <code>components</code> 配置 (带上 <strong>s</strong>)：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">const router = createRouter(&#123;</span><br><span class="line">  history: createWebHashHistory(),</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: &#x27;/&#x27;,</span><br><span class="line">      components: &#123;</span><br><span class="line">        default: Home,</span><br><span class="line">        // LeftSidebar: LeftSidebar 的缩写</span><br><span class="line">        LeftSidebar,</span><br><span class="line">        // 它们与 `&lt;router-view&gt;` 上的 `name` 属性匹配</span><br><span class="line">        RightSidebar,</span><br><span class="line">      &#125;,</span><br><span class="line">    &#125;,</span><br><span class="line">  ],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​        当然也是可以不用全部路由都要渲染的。</p>
<h3 id="命名嵌套视图"><a href="#命名嵌套视图" class="headerlink" title="命名嵌套视图"></a>命名嵌套视图</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  path: &#x27;/settings&#x27;,</span><br><span class="line">  // 你也可以在顶级路由就配置命名视图</span><br><span class="line">  component: UserSettings,</span><br><span class="line">  children: [&#123;</span><br><span class="line">    path: &#x27;emails&#x27;,</span><br><span class="line">    component: UserEmailsSubscriptions</span><br><span class="line">  &#125;, &#123;</span><br><span class="line">    path: &#x27;profile&#x27;,</span><br><span class="line">    components: &#123;</span><br><span class="line">      default: UserProfile,</span><br><span class="line">      helper: UserProfilePreview</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="重定向和别名"><a href="#重定向和别名" class="headerlink" title="重定向和别名"></a>重定向和别名</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">使用路由</span><br><span class="line">const routes = [&#123; path: &#x27;/home&#x27;, redirect: &#x27;/&#x27; &#125;]</span><br><span class="line"></span><br><span class="line">使用命名的路由</span><br><span class="line">const routes = [&#123; path: &#x27;/home&#x27;, redirect: &#123; name: &#x27;homepage&#x27; &#125; &#125;]</span><br><span class="line"></span><br><span class="line">通过一个方法，返回一个重定向目标</span><br><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    // /search/screens -&gt; /search?q=screens</span><br><span class="line">    path: &#x27;/search/:searchText&#x27;,</span><br><span class="line">    redirect: to =&gt; &#123;</span><br><span class="line">      // 方法接收目标路由作为参数</span><br><span class="line">      // return 重定向的字符串路径/路径对象</span><br><span class="line">      return &#123; path: &#x27;/search&#x27;, query: &#123; q: to.params.searchText &#125; &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/search&#x27;,</span><br><span class="line">    // ...</span><br><span class="line">  &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>​        请注意，**<a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/advanced/navigation-guards.html">导航守卫</a>并没有应用在跳转路由上，而仅仅应用在其目标上**。在上面的例子中，在 <code>/home</code> 路由中添加 <code>beforeEnter</code> 守卫不会有任何效果。</p>
<p>​        在写 <code>redirect</code> 的时候，可以省略 <code>component</code> 配置，因为它从来没有被直接访问过，所以没有组件要渲染。唯一的例外是<a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/essentials/nested-routes.html">嵌套路由</a>：如果一个路由记录有 <code>children</code> 和 <code>redirect</code> 属性，它也应该有 <code>component</code> 属性。</p>
<h3 id="相对重定向"><a href="#相对重定向" class="headerlink" title="相对重定向"></a>相对重定向</h3><p>​        也可以重定向到相对位置，这里没有理解</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/users/:id/posts&#x27;,</span><br><span class="line">    redirect: to =&gt; &#123;</span><br><span class="line">      // 方法接收目标路由作为参数</span><br><span class="line">      // return 重定向的字符串路径/路径对象</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>



<h3 id="别名"><a href="#别名" class="headerlink" title="别名"></a>别名</h3><p>​        重定向是指当用户访问 <code>/home</code> 时，URL 会被 <code>/</code> 替换，然后匹配成 <code>/</code>。那么什么是别名呢？</p>
<p>​         <strong>将 <code>/</code> 别名为 <code>/home</code>，意味着当用户访问 <code>/home</code> 时，URL 仍然是 <code>/home</code>，但会被匹配为用户正在访问 <code>/</code>。</strong> </p>
<p>​        别名就是我从url输入的路径会在别名里面判断是否存在，简单来说就是我多次定义一个path不同，但是component相同等其他相同的一个意思，我们不需要这样重复编写，而是通过别名来进行处理。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const routes = [&#123; path: &#x27;/&#x27;, component: Homepage, alias: &#x27;/home&#x27; &#125;]</span><br></pre></td></tr></table></figure>

<p>​        使别名以 <code>/</code> 开头，以使嵌套路径中的路径成为绝对路径。你甚至可以将两者结合起来，用一个数组提供多个别名：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/users&#x27;,</span><br><span class="line">    component: UsersLayout,</span><br><span class="line">    children: [</span><br><span class="line">      // 为这 3 个 URL 呈现 UserList</span><br><span class="line">      // - /users</span><br><span class="line">      // - /users/list</span><br><span class="line">      // - /people</span><br><span class="line">      // /people 是绝对路径， list 是相对路径</span><br><span class="line">      &#123; path: &#x27;&#x27;, component: UserList, alias: [&#x27;/people&#x27;, &#x27;list&#x27;] &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<p>​        如果你的路由有参数，请确保在任何绝对别名中包含它们：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/users/:id&#x27;,</span><br><span class="line">    component: UsersByIdLayout,</span><br><span class="line">    children: [</span><br><span class="line">      // 为这 3 个 URL 呈现 UserDetails</span><br><span class="line">      // - /users/24</span><br><span class="line">      // - /users/24/profile</span><br><span class="line">      // - /24</span><br><span class="line">      &#123; path: &#x27;profile&#x27;, component: UserDetails, alias: [&#x27;/:id&#x27;, &#x27;&#x27;] &#125;,</span><br><span class="line">    ],</span><br><span class="line">  &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>



<h2 id="路由组件传参"><a href="#路由组件传参" class="headerlink" title="路由组件传参"></a>路由组件传参</h2><h3 id="通过-props-true-传递给路由组件"><a href="#通过-props-true-传递给路由组件" class="headerlink" title="通过 props:true 传递给路由组件"></a>通过 props:true 传递给路由组件</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const User = &#123;</span><br><span class="line">  props: [&#x27;id&#x27;],</span><br><span class="line">  template: &#x27;&lt;div&gt;User &#123;&#123; id &#125;&#125;&lt;/div&gt;&#x27;</span><br><span class="line">&#125;</span><br><span class="line">const routes = [&#123; path: &#x27;/user/:id&#x27;, component: User, props: true &#125;]</span><br></pre></td></tr></table></figure>

<p>​        那么此时，id 就会通过props传递给路由组件</p>
<h3 id="命名视图-1"><a href="#命名视图-1" class="headerlink" title="命名视图"></a>命名视图</h3><p>​        对于有命名视图的路由，必须给props里面给每个命名视图定义配置</p>
<ul>
<li><p>如果直接使用 props: true，那么代表里面所有的都为true</p>
</li>
<li><p>否则就需要使用对象来对每个命名视图进行处理</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/user/:id&#x27;,</span><br><span class="line">    components: &#123; default: User, sidebar: Sidebar &#125;,</span><br><span class="line">    props: &#123; default: true, sidebar: false &#125;</span><br><span class="line">    // 所有的都为true</span><br><span class="line">    // props: true</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>



<h3 id="props使用对象"><a href="#props使用对象" class="headerlink" title="props使用对象"></a>props使用对象</h3><p>​        当 <code>props</code> 是一个对象时，它将原样设置为组件 props。当 props 是静态的时候很有用。</p>
<p>​        就是说，使用的是对象的话，那么对象里面的内容就会作为props传递给路由组件。同时如果此时你的路由组件是携带了参数的。那么将不会传递给路由组件了。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/promotion/from-newsletter&#x27;,</span><br><span class="line">    component: Promotion,</span><br><span class="line">    props: &#123; newsletterPopup: false &#125;</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>



<h3 id="函数模式"><a href="#函数模式" class="headerlink" title="函数模式"></a>函数模式</h3><p>注意：</p>
<ul>
<li>对于函数，参数是route</li>
<li>返回值，如果是 Boolean 值，并不会变成 props: true 这两个并不是一个意思。所以不会起作用。</li>
<li>返回值，常是一个对象。然后按照对象的形式来处理</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/search&#x27;,</span><br><span class="line">    component: SearchUser,</span><br><span class="line">    props: route =&gt; (&#123; query: route.query.q &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>



<h2 id="不同的历史模式"><a href="#不同的历史模式" class="headerlink" title="不同的历史模式"></a>不同的历史模式</h2><h3 id="Hash模式"><a href="#Hash模式" class="headerlink" title="Hash模式"></a>Hash模式</h3><p>​        hash 模式是用 <code>createWebHashHistory()</code> 创建的：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">import &#123; createRouter, createWebHashHistory &#125; from &#x27;vue-router&#x27;</span><br><span class="line"></span><br><span class="line">const router = createRouter(&#123;</span><br><span class="line">  history: createWebHashHistory(),</span><br><span class="line">  routes: [</span><br><span class="line">    //...</span><br><span class="line">  ],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​        hash模式就是通过在url后面使用一个hash字符 #。然后因为哈希字符并不会发送到服务器，所以不会出现找不到url的情况。但是对于 SEO 和 看来说，确实有点影响。</p>
<h3 id="HTML5模式，history模式"><a href="#HTML5模式，history模式" class="headerlink" title="HTML5模式，history模式"></a>HTML5模式，history模式</h3><p>​        用 <code>createWebHistory()</code> 创建 HTML5 模式，推荐使用这个模式：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">import &#123; createRouter, createWebHistory &#125; from &#x27;vue-router&#x27;</span><br><span class="line"></span><br><span class="line">const router = createRouter(&#123;</span><br><span class="line">  history: createWebHistory(),</span><br><span class="line">  routes: [</span><br><span class="line">    //...</span><br><span class="line">  ],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​        当使用这种历史模式时，URL 会看起来很 “正常”，例如 <code>https://example.com/user/id</code>。漂亮!</p>
<p>​        不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 <code>https://example.com/user/id</code>，就会得到一个 404 错误。这就丑了。</p>
<p>​        不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 <code>index.html</code> 相同的页面。漂亮依旧!</p>
<p>​        简单来说就是，因为history模式的 url 是不带hash，所以我们知道从一个浏览器里面输入一个正常的url，他会找到对应的服务器并发送请求，那么类似于这种的： <a target="_blank" rel="noopener" href="https://example.com/usre/id">https://example.com/usre/id</a> 他就会先进入对应的。</p>
<h3 id="服务器配置实例"><a href="#服务器配置实例" class="headerlink" title="服务器配置实例"></a>服务器配置实例</h3><p>​        <strong>注意</strong>：以下示例假定你正在从根目录提供服务。如果你部署到子目录，你应该使用<a target="_blank" rel="noopener" href="https://cli.vuejs.org/config/#publicpath">Vue CLI 的 <code>publicPath</code> 配置</a>和相关的<a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/api/#createwebhistory">路由器的 <code>base</code> 属性</a>。你还需要调整下面的例子，以使用子目录而不是根目录（例如，将<code>RewriteBase/</code> 替换为 <code>RewriteBase/name-of-your-subfolder/</code>）。</p>
<h4 id="Apache"><a href="#Apache" class="headerlink" title="Apache"></a>Apache</h4><p>​        没有学过，可以说是完全看不懂了。</p>
<p>​        也可以使用 <a target="_blank" rel="noopener" href="https://httpd.apache.org/docs/2.2/mod/mod_dir.html#fallbackresource"><code>FallbackResource</code></a> 代替 <code>mod_rewrite</code>。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;IfModule mod_rewrite.c&gt;</span><br><span class="line">  RewriteEngine On</span><br><span class="line">  RewriteBase /</span><br><span class="line">  RewriteRule ^index\.html$ - [L]</span><br><span class="line">  RewriteCond %&#123;REQUEST_FILENAME&#125; !-f</span><br><span class="line">  RewriteCond %&#123;REQUEST_FILENAME&#125; !-d</span><br><span class="line">  RewriteRule . /index.html [L]</span><br><span class="line">&lt;/IfModule&gt;</span><br></pre></td></tr></table></figure>



<h4 id="nginx"><a href="#nginx" class="headerlink" title="nginx"></a>nginx</h4><p>​        实不相瞒，nginx，我也没有学过。。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">location / &#123;</span><br><span class="line">  try_files $uri $uri/ /index.html;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="原生-Node-js"><a href="#原生-Node-js" class="headerlink" title="原生 Node.js"></a>原生 Node.js</h4><p>​        简单来说，就是先建立监听。</p>
<p>​        然后使用 createServer，这个方法就会将所有的请求都会进行处理了。无论是什么请求，都会进行一个处理。那么我们思考这个算是一个拦截吗，因为既然什么请求都可以进行处理。那么就可以先做一个请求的拦截。当然，这样写符不符合规范不清楚。但是确实做拦截应该是可以的。</p>
<p>​        这里的内容就是，收到请求，然后将index文件里的内容进行读取，然后再通过写响应头，并将内容进行返回。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">const http = require(&#x27;http&#x27;)</span><br><span class="line">const fs = require(&#x27;fs&#x27;)</span><br><span class="line">const httpPort = 80</span><br><span class="line"></span><br><span class="line">http</span><br><span class="line">  .createServer((req, res) =&gt; &#123;</span><br><span class="line">    fs.readFile(&#x27;index.html&#x27;, &#x27;utf-8&#x27;, (err, content) =&gt; &#123;</span><br><span class="line">      if (err) &#123;</span><br><span class="line">        console.log(&#x27;We cannot open &quot;index.html&quot; file.&#x27;)</span><br><span class="line">      &#125;</span><br><span class="line"></span><br><span class="line">      res.writeHead(200, &#123;</span><br><span class="line">        &#x27;Content-Type&#x27;: &#x27;text/html; charset=utf-8&#x27;,</span><br><span class="line">      &#125;)</span><br><span class="line"></span><br><span class="line">      res.end(content)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">  .listen(httpPort, () =&gt; &#123;</span><br><span class="line">    console.log(&#x27;Server listening on: http://localhost:%s&#x27;, httpPort)</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure>



<h4 id="Express-Node-js"><a href="#Express-Node-js" class="headerlink" title="Express + Node.js"></a>Express + Node.js</h4><p>​        对于 Node.js/Express，可以考虑使用 <a target="_blank" rel="noopener" href="https://github.com/bripkens/connect-history-api-fallback">connect-history-api-fallback 中间件</a>。</p>
<p>后续还有很多其他的，但是因为其他的我连名字都没有听过了，所以就不写了，直接上官网链接。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://router.vuejs.org/zh/guide/essentials/history-mode.html</span><br></pre></td></tr></table></figure>



<h3 id="caveat"><a href="#caveat" class="headerlink" title="caveat"></a>caveat</h3><p>​        这有一个注意事项。你的服务器将不再报告 404 错误，因为现在所有未找到的路径都会显示你的 <code>index.html</code> 文件。为了解决这个问题，你应该在你的 Vue 应用程序中实现一个万能的路由来显示 404 页面。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const router = createRouter(&#123;</span><br><span class="line">  history: createWebHistory(),</span><br><span class="line">  routes: [&#123; path: &#x27;/:pathMatch(.*)&#x27;, component: NotFoundComponent &#125;],</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>​        另外，如果你使用的是 Node.js 服务器，你可以通过在服务器端使用路由器来匹配传入的 URL，如果没有匹配到路由，则用 404 来响应，从而实现回退。查看 <a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/guide/ssr/introduction.html#what-is-server-side-rendering-ssr">Vue 服务器端渲染文档</a>了解更多信息。</p>
<p>​        这里，为什么使用 /:pathMatch(.*) 来匹配404呢，那是因为，这里路由的选择是一个按照分级来排名的。而这个写法的分数只有20分，基本可以说是，只有其他都匹配不上了，才会匹配上这个。</p>
<p>​        所以常用这个来匹配404路由。</p>

    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/router/" rel="tag"># router</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2022/02/04/CSS/css-hover%E5%92%8Cfocus%E9%A1%BA%E5%BA%8F/" rel="prev" title="css-hover和focus顺序">
                  <i class="fa fa-chevron-left"></i> css-hover和focus顺序
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2022/02/10/router/router%E8%BF%9B%E9%98%B6/" rel="next" title="router进阶">
                  router进阶 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
